import React, { useState } from "react";
import { NextPage } from "next";
import { AdminLayout } from "@/layout";
import { Row, Col, List, Avatar, Tabs, Input, Button, message } from "antd";
import { FileApi } from "@/api/file";
import { CommentApi } from "@/api/comment";
import { ArticleApi } from "@/api/article";
import { ViewApi } from "@/api/view";
import { CategoryApi } from "@/api/categroy";
import { TagApi } from "@/api/tags";
import { FileDrawer } from "@/components/FileDrawer";
import { getUser, saveUser } from "@/utils/catch";
import FormItem from "antd/lib/form/FormItem";
import { UserApi } from "@/api/user";

const Ownspace: NextPage = (props) => {
  const { files, comments, articles, views, categories, tags } = props as any;
  const defaultUser = getUser();
  const [name, setName] = useState(defaultUser?.name);
  const [email, setEmail] = useState(defaultUser?.email);
  const [avatar, setAvatar] = useState(defaultUser?.avatar);

  const [oldpass, setOldpass] = useState("");
  const [newpass, setNewpass] = useState("");
  const [repass, setRepass] = useState("");

  const [visible, setVisible] = useState(false);

  const save = () => {
    const data = Object.assign(defaultUser, {
      name,
      email,
      avatar,
    });
    UserApi.updateInfo(data).then((res) => {
      message.success("更新成功");
      saveUser(data);
    });
  };
  const changePass = () => {
    if (!oldpass.trim() || !newpass.trim() || !repass.trim()) return;
    if (newpass !== repass) {
      message.warn("两次密码不一致");
      return;
    }
    UserApi.updatePassword({ oldPassword: oldpass, newPassword: newpass }).then(
      (res) => {
        message.success("修改成功");
      }
    );
  };
  return (
    <AdminLayout>
      <Row gutter={20}>
        <Col span={12}>
          <List
            bordered
            header={
              <div
                style={{
                  width: 50,
                  height: 50,
                  margin: "0 auto",
                  cursor: "pointer",
                }}
                onClick={() => setVisible(true)}
              >
                <Avatar style={{ width: 50, height: 50 }} src={avatar} />
              </div>
            }
          >
            <List.Item key={1}>共发表了 {articles[1]} 篇文章</List.Item>
            <List.Item key={2}>共创建了 {categories?.length} 个分类</List.Item>
            <List.Item key={3}>共创建了 {tags?.length} 个标签</List.Item>
            <List.Item key={4}>共上传了 {files[1]} 个文件</List.Item>
            <List.Item key={5}>共获得了 {comments[1]} 个评论</List.Item>
            <List.Item key={6}>累计浏览量 {views[1]} 次</List.Item>
          </List>
        </Col>
        <Col span={12}>
          <List header={"个人资料"} bordered>
            <List.Item>
              <Tabs defaultActiveKey="1">
                <Tabs.TabPane tab="基本设置" key="1">
                  <FormItem label="用户名">
                    <Input
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                    />
                  </FormItem>
                  <FormItem label="邮箱">
                    <Input
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                    />
                  </FormItem>
                  <FormItem>
                    <Button type="primary" onClick={save}>
                      保存
                    </Button>
                  </FormItem>
                </Tabs.TabPane>
                <Tabs.TabPane tab="修改密码" key="2">
                  <FormItem label="原密码">
                    <Input.Password
                      onChange={(e) => setOldpass(e.target.value)}
                    />
                  </FormItem>
                  <FormItem label="新密码">
                    <Input.Password
                      onChange={(e) => setNewpass(e.target.value)}
                    />
                  </FormItem>
                  <FormItem label="确认密码">
                    <Input.Password
                      onChange={(e) => setRepass(e.target.value)}
                    />
                  </FormItem>
                  <FormItem>
                    <Button type="primary" onClick={changePass}>
                      确认
                    </Button>
                  </FormItem>
                </Tabs.TabPane>
              </Tabs>
            </List.Item>
          </List>
        </Col>
      </Row>
      <FileDrawer
        closeAfterClick={true}
        visible={visible}
        onClose={() => setVisible(false)}
        onChange={setAvatar}
      />
    </AdminLayout>
  );
};

Ownspace.getInitialProps = async (ctx) => {
  const [
    files,
    comments,
    articles,
    views,
    categories,
    tags,
  ] = await Promise.all([
    FileApi.getFiles({}),
    CommentApi.getComments({}),
    ArticleApi.getArticles({}),
    ViewApi.getAll(),
    CategoryApi.getAll(),
    TagApi.getAll(),
  ]);
  return {
    files,
    comments,
    articles,
    views,
    categories,
    tags,
  };
};
export default Ownspace;
